<template>
  <div class="el-page el-main el-position">
    <div class="search-box search-box-height" id="search-box">
      <div class="search-card">
        <div class="input-box">
          <div class="searchCard">
            <span class="searchText">系统模块：</span>
            <el-input class="shadowInput" v-model="form.title" clearable size="mini" placeholder="请输入系统模块"></el-input>
          </div>
          <div class="searchCard">
            <span class="searchText">操作人员：</span>
            <el-input class="shadowInput" v-model="form.operName" clearable size="mini"
              placeholder="请输入操作人员"></el-input>
          </div>
          <div class="searchCard">
            <span class="searchText">类型：</span>
            <el-select class="shadowInput" size="mini" clearable v-model="form.businessType" placeholder="请选择操作类型">
              <el-option v-for="item in operList" :key="item.value" :label="item.value" :value="item.label">
              </el-option>
            </el-select>
          </div>
          <div class="searchCard">
            <span class="searchText">状态：</span>
            <el-select class="shadowInput" size="mini" clearable v-model="form.status" placeholder="请选择操作状态">
              <el-option v-for="item in statusList" :key="item.value" :label="item.value" :value="item.label">
              </el-option>
            </el-select>
          </div>
          <div class="searchCard">
            <span class="searchText">操作时间：</span>
            <el-date-picker v-model="timeList" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
              type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" size="mini"
              @change="handleFormData">
            </el-date-picker>
          </div>
        </div>
        <div class="button-box">
          <el-button class="search" @click="getList">搜索</el-button>
          <el-button class="clear" @click="handleReset">清除</el-button>
        </div>
      </div>
    </div>
    <el-divider v-if="isDropdownVisible"></el-divider>
    <div class="operate-box">
      <div class="button-box">
        <el-popconfirm confirm-button-text='确定' cancel-button-text='取消' icon="el-icon-info" icon-color="red"
          title="确定删除所勾选的数据吗？" @confirm="handleDel">
          <el-button slot="reference" type="danger" plain icon="el-icon-delete" size="mini">删除</el-button>
        </el-popconfirm>
        <el-button slot="reference" type="danger" plain icon="el-icon-delete" size="mini" style="margin-left: 10px;"
          @click="handleDelAll">清空</el-button>
      </div>
      <div>
        <el-tooltip class="item" effect="dark" content="刷新" placement="top">
          <el-button class="circleButtom" size="mini" icon="el-icon-refresh" circle @click="getList"></el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="隐藏搜索" placement="top">
          <el-button class="circleButtom" size="mini" icon="el-icon-sort" circle @click="toggleDropdown"></el-button>
        </el-tooltip>
      </div>
    </div>
    <div class="table-box">
      <TableCom ref="tableCom" :tableHead="tableHead" :tableData="tableData" :tableOperate="tableOperate"
        :delList.sync="delList" :showIndex="false">
      </TableCom>
    </div>
    <div class="page-box">
      <PageCom :page="pageData.current" :size="pageData.size" :total="total" @handleSize="handleSize"
        @handleCurrent="handleCurrent"></PageCom>
    </div>
    <!-- 详情弹框 -->
    <viewBox ref="viewBox" :showDialog.sync="showDialog"></viewBox>
  </div>
</template>

<script>
import '../scss/style.scss'
import { listApi, delApi } from '@/api/system'
import { selectApi } from '@/api/select'
import TableCom from '@/components/TableCom'
import PageCom from '@/components/PageCom'
import ViewBox from './Dialog/viewBox.vue'
export default {
  components: {
    TableCom,
    PageCom,
    ViewBox,
  },
  data() {
    return {
      form: {
        title: '',
        createUser: '',
        businessType: '',
        status: '',
        startTime: '',
        endTime: '',
      },
      pageData: {
        current: 1,
        size: 10
      },
      total: 0,
      tableHead: [/* {
        title: '日志编号',
        prop: 'operCode'
      }, */ {
          title: '系统模块',
          prop: 'title'
        }, {
          title: '操作类型',
          prop: 'businessType'
        }, {
          title: '请求方式',
          prop: 'requestMethod'
        }, {
          title: '操作人员',
          prop: 'createUser'
        }, {
          title: '操作地址',
          prop: 'operIp'
        }, {
          title: '操作地点',
          prop: 'operIp'
        }, {
          title: '操作',
          prop: 'sta'
        }, {
          title: '操作日期',
          prop: 'createTime'
        }],
      tableData: [],
      tableOperate: [{
        title: '详细',
        handle: (row) => {
          this.$refs.viewBox.row = { ...row }
          this.showDialog = true
        },
        flag: () => {
          return true
        }
      }],
      operList: [],
      statusList: [],
      timeList: [],
      showDialog: false,
      delList: [],
      isDropdownVisible: true,
    }
  },
  methods: {
    // 显示隐藏下拉框
    toggleDropdown() {
      const search = document.getElementById('search-box');
      if (!this.isDropdownVisible) {
        search.classList.add('search-box-height');
      } else {
        search.classList.remove('search-box-height');
      }
      this.isDropdownVisible = !this.isDropdownVisible;
    },
    // 获取下拉框
    async handleGetSelect() {
      let res = await Promise.all([
        selectApi({ type: 'oper_type' }),
        selectApi({ type: 'oper_status' }),
      ])
      this.operList = res[0].data.dictItemList
      this.statusList = res[1].data.dictItemList
    },
    // 搜索框时间
    handleFormData() {
      if (this.timeList.length) {
        this.form.startTime = this.timeList[0]
        this.form.endTime = this.timeList[1]
      } else {
        this.form.startTime = ''
        this.form.endTime = ''
      }
    },
    // 重置
    handleReset() {
      this.form = {
        title: '',
        operName: '',
        businessType: '',
        status: '',
        startTime: '',
        endTime: '',
      }
      this.timeList = []
    },
    // 获取表格
    async getList() {
      const { data } = await listApi(this.form, this.pageData)
      this.total = data.total
      this.tableData = data.records
    },
    // 分页
    handleSize(size) {
      this.pageData.current = 1
      this.pageData.size = size
      this.getList()
    },
    handleCurrent(current) {
      this.pageData.current = current
      this.getList()
    },
    // 删除
    async handleDel() {
      let { code } = await delApi(this.delList)
      if (code == 0) {
        Message({
          message: '删除成功',
          type: 'success',
          duration: 3 * 1000
        })
      }
      this.getList()
    },
    // 清空
    handleDelAll() {
      this.$confirm('是否确认清空所有操作日志数据项？', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        cancelButtonClass: 'cancel',
        type: 'warning',
      }).then(async () => {
        await delApi(this.delList)
        this.getList()
      }).catch(() => {

      });
    },
  },
  mounted() {
    this.handleGetSelect()
    this.getList()
  }
}
</script>

<style lang='scss' scoped>
.el-page {
  width: 100%;
  height: calc(100vh - 70px);

  .search-box {
    height: 0px;
    transition: height 0.3s ease;
    overflow: hidden;

    .search-card {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;

      .arrow {
        cursor: pointer;
        display: inline-block;
        position: absolute;
        right: -100px;
        font-size: 30px;
        transition: transform 0.3s ease;
      }

      .arrow.down {
        transform: rotate(90deg);
      }
    }

    .input-box {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      transition: height 0.2s ease-in-out;
    }
  }

  .search-box-height {
    height: 40px !important;
  }

  .search-box-height {
    height: 90px;
  }

  .operate-box {
    width: 100%;
    background-color: #f5f7fa;
    padding: 8px 5px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

}

.cancel {

  border-radius: 5px;
  position: relative;
  line-height: 20px;
  text-align: center;
  font-size: 14px;

  &:hover,
  &:focus {
    background: rgba($color: #e8f4ff, $alpha: 1) !important;
    border: 1px solid #0e7b67 !important;
    color: #0e7b67 !important;
  }

}
</style>
